// 用户中心首页
<template>
    <div>
        <div class="usercenterContainer">
            <!-- 广播 -->
           <div class="radioBox flex flex-align-center" @click="onToRadio">
               <img src="@/assets/img/user-center/xiaolaba.png" alt="">
               <p><span style="color:#ff822e;margin-right:0.1rem">系统通知:</span>{{radio_cont}}</p>
           </div>
           <!-- 用户信息 账户余额 -->
           <div class="userInfoBox flex flex-align-center">
               <div class="userInfo">
                   <div class="hederBox">
                       <img class="user-head" :src="$store.state.userInfo.avatar" alt="用户头像">
                       <div class="nameBox flex">
                           <p class="name">{{$store.state.userInfo.user_name}}</p>
                           <div class="vipBox flex flex-align-center flex-pack-center" :class="{'novip':$store.state.userInfo.is_expire == 1}">
                               <p>VIP</p>
                           </div>
                       </div>
                       <p class="userType">账户类型：{{$store.state.userInfo.member_type}}</p>
                       <p class="Dataover">有效期截止：{{$store.state.userInfo.use_end_time}}<span v-if='$store.state.userInfo.is_expire == 1'>到期</span></p>
                   </div>
               </div>
                <div class="moneyBox">
                    <p class="moneyTips">账户余额</p>
                    <p class="MoneyNum">￥{{balance}}</p>
                    <div class="txBtn flex flex-align-center flex-pack-center" @click="onPutforward"><p>立即提现</p></div>
                    <img  v-if='$store.state.userInfo.member_type_int != 1' src="@/assets/img/user-center/cz-btn.png" alt="代理充值" class="dlchongz" @click="onRecharge">
                </div>
           </div>
           <!-- 新增会员 -->
           <div class="addBox flex flex-align-center" v-if='$store.state.userInfo.is_expire == 0 && $store.state.userInfo.member_type_int != 0'>
                <div class="addbox-left flex flex-align-center flex-pack-center" @click="addUserFun">
                    <p>新增会员</p>
                </div>
                <div class="addbox-right flex flex-align-center flex-pack-center" @click="addAdFun">
                    <p>会员广告申请上架</p>
                </div>
           </div>
           <!-- app下载提示 -->
           <div class="DwonBox flex flex-align-center  flex-pack-center">
               <img class="Dwon-tops" src="@/assets/img/user-center/tips-img.png" alt="下载广告">
               <img src="@/assets/img/user-center/ios.png" alt="ios" class="dwon-ios" @click="onDwon('ios')">
               <img src="@/assets/img/user-center/adriod.png" alt="安卓" class="dwon-adriod" @click="onDwon('android')">
               <transition name="fade">
               <div class="ercodeBox" v-if='isAdroid'>
                   <img :src="dwonImgUrl" alt="">
                   <p>扫描二维码即可下载</p>
               </div>
                </transition>
                <transition name="fade">
               <div class="ercodeBox ios" v-if='isIos'>
                   <img :src="dwonImgUrl" alt="">
                   <p>扫描二维码即可下载</p>
               </div>
                </transition>
           </div>
           <!-- 菜单 -->
           <div class="MenuBox">
               <div class="menuItem flex flex-align-center flex-pack-center" v-for='(item,index) in MenuItem' :key='index' @click="onItemFun(item.name)">
                   <img :src="item.imgUrl" alt="">
                   <p>{{item.name}}</p>
               </div>
                <div class="menuItem flex flex-align-center flex-pack-center">
                   <p>语音播报</p>
                   <div class="switch">
                   <el-switch 
                        v-model="value1"
                        active-value="1"
                        inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#999999" >
                    </el-switch>
                    </div>
               </div>
           </div>
        </div>
    </div>
</template>
<script>
import QRCode from 'qrcode'
const muneList = [
    {imgUrl:'./static/img/user-center/symx.png',name:'收益明细'},
    {imgUrl:'./static/img/user-center/yhkgl.png',name:'银行卡管理'},
    {imgUrl:'./static/img/user-center/yqjl.png',name:'邀请记录'},
    {imgUrl:'./static/img/user-center/txjl.png',name:'提现记录'},
    {imgUrl:'./static/img/user-center/xgmm.png',name:'修改密码'},
    {imgUrl:'./static/img/user-center/xgzl.png',name:'修改资料'},
    {imgUrl:'./static/img/user-center/tglj.png',name:'推广链接'}]
export default {
    data () {
        return {
            dwonImgUrl:'',
            radio_cont:'',
            isDaoqi:false,
            value1:null,
            MenuItem: muneList,
            isIos:false,
            isAdroid:false,
        }
    },
    created () {
        this.value1 = this.$store.state.userInfo.announcement.toString(); 
        this.https('user/getObtainNoticeById',{page:1})
        .then(data => {
            if(data.data.length != 0){
                let text = data.data[0].message+','+data.data[0].title+'。'+data.data[0].create_time
                this.radio_cont = text;
            }
        })
    },
    watch: {
        value1(news,old){
            if(news == 1){
                this.postUpdateAnnouncement('1');
            }else if(news == 0){
                 this.postUpdateAnnouncement('0');
            }
        }
    },
    computed: {
        balance(){
            return this.$store.getters.getUserInfo.balance;
        }
    },
    methods: {
        postUpdateAnnouncement(announcement){
            this.https('user/postUpdateAnnouncement',{announcement:announcement},'post')
            .then(data => {
                this.$store.commit('setAnnouncement',announcement);
            })
        },
        onDwon(type){ //获取下载生成二维码参数
            this.https('download/getObtainDownloadQrCode',{type:type})
            .then(data => {
                this.qrcode(data);
                if(type == 'ios'){
                    this.isIos = !this.isIos;
                    this.isAdroid = false;
                }else{
                    this.isAdroid = !this.isAdroid;
                    this.isIos = false;
                }
            })
        },
         qrcode(urltext){ //生成二维码方法
                let _self = this;
                 QRCode.toDataURL(urltext, {errorCorrectionLevel: 'H'}, function (err, url) {
                    _self.dwonImgUrl = url;
                })
        },
        addUserFun(){ //新增会员
            this.$router.push('/AddUser')
        },
        addAdFun(){ //新增广告
            this.$router.push('/Adshelf')
        },
        onItemFun(ele){ //菜单点击跳转
           switch(ele){
               case '收益明细':
               this.$router.push('/ProfitList')
               break;
               case '银行卡管理':
               this.$router.push('/BankCardList')
               break;
               case '邀请记录':
               this.$router.push('/InvitationList')
               break;
               case '提现记录':
               this.$router.push('/txlist')
               break;
               case '修改密码':
               this.$router.push('/ModifyPwd')
               break;
               case '修改资料':
               this.$router.push('/ModifyUserInfo')
               break;
               case '推广链接':
               this.$router.push('/ShareLink')
               break;
           }
        },
        onToRadio(){ //广播
            this.$router.push('/radiolist')
        },
        onPutforward(){ //提现
            this.$router.push('/Putforward')
        },
        onRecharge(){ //充值
            if(this.$store.state.userInfo.member_type_int == 0){
                this.$router.push('/MembershipRecharge')
            }else{
                this.$router.push('/AgentRecharge')
            }   
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/usercenter/usercenter.less);
</style>


